<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="/wx_shop_api/css/bootstrap.min.css">
    <link rel="stylesheet" href="/wx_shop_api/css/index.css">
    <style>
        body {
            background: url(/wx_shop_api/images/login_bg.jpg) no-repeat 0px 0px;
            background-size: cover;
        }

        .login-form {
            background: #2b2b36;
            width: 400px;
            margin: 3% auto 0 auto;
            border-radius: 8px;
            padding: 10px 30px 20px 30px;
            color: white;
        }
    </style>
</head>
<body>

<div class="login-form" id="loginUserVM">

    <h2>登录</h2>

    <form id="loginUserForm" class="form-horizontal" action="" method="post">
        <div class="form-group">

            <div class="col-sm-12">
                <input type="text" class="form-control" name="app_username" v-model="formData.username" placeholder="用户名">
            </div>
        </div>
        <div class="form-group">

            <div class="col-sm-12">
                <input type="password" class="form-control" name="app_password" v-model="formData.password" id="password" placeholder="密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="checkbox">
                    <label style="color: white;">
                        <input type="checkbox"> 记住密码
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <input type="button" v-on:click="toLogin()" class="btn btn-info btn-block" value="登录" />
            </div>
        </div>
    </form>

</div>


<script src="/wx_shop_api/js/lib/jquery.min.js"></script>
<script src="/wx_shop_api/js/lib/bootstrap.min.js"></script>
<script src="/wx_shop_api/js/lib/jquery.validate.min.js"></script>
<script src="/wx_shop_api/js/comm.js"></script>
<script src="/wx_shop_api/js/lib/vue.min.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#loginUserVM',
        data: {
            formData: { username: '', password:'' }
        },
        methods: {
            toLogin: function() {
                console.info(JSON.stringify(vm.formData));

                // 验证数据
                $('#loginUserForm')[0].submit();

            }
        }
    });

</script>

</body>
</html>